﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>经费报销</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <link href="/CSS/bootstrap3.3.5/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="/CSS/Base/BaseClass.css?cssver=4" rel="stylesheet" type="text/css" /> 
    <link href="/JqueryPlug/dtGrid/jquery.dtGrid.css" rel="stylesheet"> 
    <link href="/CSS/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="/Scripts/jquery-1.11.2.min.js"></script>
    <script src="/Scripts/avalon.min.js"></script> 
    <script src="/JqueryPlug/dtGrid/jquery.dtGrid.js"></script>
    <script src="/Scripts/SZHLCommon.js?jsver=5"></script>
    <style type="text/css">
        html, body {
            overflow: hidden;
        }

        ul {
            list-style: none;
            padding-left: 30px;
            font-size: 16px;
        }

            ul li {
                margin-bottom: 5px;
            }

                ul li .spanli:hover {
                    background-color: bisque;
                    cursor: pointer;
                }

            ul .spanwz {
                margin-left: 2px;
                padding: 2px;
            }

            ul .fa {
                cursor: pointer;
                color: crimson;
            }

        .panel {
            border-radius: 0;
        }

        .treefile {
            width: 20px;
            height: 18px;
            color: #1B9AF7;
        }

        dl {
            margin-bottom: 10px;
        }
    </style>

    <script>
        var grid, dtoption;

        //获取主要菜单
        dtoption = {
            lang: 'zh-cn',
            check: false,
            ajaxLoad: false,
            exportFileName: '经费报销单',
            columns: [
                 { id: 'ID', title: '序号', type: 'string', columnClass: 'text-center', hide: true },
                { id: 'FormCode', title: '报销单号', type: 'string', columnClass: 'text-center' },
                { id: 'BXZJE', title: '总金额', type: 'string', columnClass: 'text-center' },
                { id: 'ShenQingRen', title: '申请人', type: 'string', columnClass: 'text-center' },
                {
                    id: 'Option', title: '审批状态', type: 'string', columnClass: 'text-center', resolution: function (value, record, column, grid, dataNo, columnNo) {
                        return ComFunJS.getSPStatus(record.StateName, record.ID, record.intProcessStanceid);
                    }
                }

            ],
            gridContainer: 'dtgrid',
            toolbarContainer: 'dtgridTool',
            pageSize: 8,
            pageSizeLimit: [10, 20, 50],
            tools: 'faseQuery',
            onGridComplete: function (grid) {
                var log = '<p>表格加载完成。表格编号：' + grid.option.id + '。</p>';
            }
        };
        var model = avalon.define({
            $id: "APP_JFBX",
            menutype: "",//菜单类型(0:个人日报.-1:"当前部门日报")
            selmenu: function (val) {
                model.menutype = val;
                model.CommonData.clear();
                model.GetJFBXList()
                model.queryuser = "";
                if (model.menutype == "-1") {
                    $.getJSON('/API/SZHLAPI.ashx?Action=GETUSERTREE', { P1: "1", }, function (resultData) {//获取可以查看日报的人员列表
                        model.userlist = resultData.Result;
                    })
                }
            },//选中菜单事件
            queryuser: "",
            userlist: {},
            folderclick: function (item, dom) {
                $(".divuser").hide();
                $(dom).parent().find("div").eq(0).toggle();
            },
            fnqueryuser: function (item) {
                if (item) {
                    model.queryuser = item.UserName;
                    model.CommonData.clear();
                    model.GetJFBXList();
                }

            },
            render: function () {
                avalon.templateCache = null;

            },
            showaddxf: function () {
                $("#thadd").toggle('fast');
            },
            hideaddxf: function () {
                $("#thadd").hide('fast');

            },
            JFBXItem: { "LeiBie": "", "BXJE": "", "BXContent": "", "BXDate": "" },
            JFBXItemList: [],//未报销的经费列表
            ColumnData: [],
            CommonData: [],
            TotalCount:"",
            UserCount:"",
            isforbid: "",
            searchContent: "",
            addxf: function () {
                if (model.JFBXItem.LeiBie == "")
                {
                    parent.ComFunJS.winwarning("请选择类型");
                    return;
                }
                if (model.JFBXItem.BXDate == "") {
                    parent.ComFunJS.winwarning("请选择日期");
                    return;
                }
                if (model.JFBXItem.BXJE == "") {
                    parent.ComFunJS.winwarning("请填写报销金额");
                    return;
                }
                if (!(/^[0-9]*$/.test(model.JFBXItem.BXJE))) {
                    retmsg = "报销金额必须是数字";
                }
                if (model.JFBXItem.BXContent == "") {
                    parent.ComFunJS.winwarning("请填写事由");
                    return;
                }
                
                var modelValue = JSON.stringify(model.JFBXItem.$model);
                $.post("/API/FTAPI.ashx", { Action: "ADDJFBXITEM", P1: modelValue }, function (result) {
                    result = $.parseJSON(result);
                    if ($.trim(result.ErrorMsg) != "") {
                        parent.ComFunJS.winwarning(result.ErrorMsg);
                    } else {
                        model.JFBXItemList.push(result.Result);
                        parent.ComFunJS.winsuccess("保存成功");
                        model.JFBXItem = { "LeiBie": model.JFBXItem.LeiBie, "BXJE": "", "BXContent": "", "BXDate": "" };
                    }
                });
            },
            delxf: function (item) {
                model.JFBXItemList.remove(item);
                $.post("/API/FTAPI.ashx", { Action: "DELJFBXITEM", P1: item.ID },
             function (result) {
                 if ($.trim(result.ErrorMsg) != "") {
                     parent.ComFunJS.winwarning(result.ErrorMsg);
                 } else {
                     parent.ComFunJS.winsuccess("删除成功");
                 }
             });
            },
            GetJFBXItem: function () {
                //未报销的经费列表
                $.getJSON('/API/FTAPI.ashx?Action=GETJFBXITEMLIST', function (resultData) {
                    if (resultData.ErrorMsg == "") {
                        model.JFBXItemList = resultData.Result;
                    }
                })
            }, GetJFBXList: function () {
                //已添加的报销单
                $.getJSON('/API/FTAPI.ashx?Action=GETUSERJFBXLIST', { P1: model.searchContent, b: model.menutype,  QUSER:  "'" + model.queryuser + "'" }, function (resultData) {
                    if (resultData.ErrorMsg == "") {
                        model.CommonData = resultData.Result;
                        model.isforbid = resultData.Result1;
                        if (dtoption.datas != undefined) {
                            dtoption.originalDatas = model.CommonData;

                        } else {
                            dtoption.datas = model.CommonData;
                            grid = $.fn.DtGrid.init(dtoption);
                        }
                        grid.load()
                    }
                })
            },
            addJFBX: function () {
                var Ids = "";
                $("input[type=checkbox][name=itemid]:checked").each(function () {
                    Ids += $(this).attr("val") + ",";
                })
                Ids = Ids.substring(0, Ids.length - 1);
                parent.ComFunJS.winviewform("/View/APPBaseView/APP_ADD_WF.html?FormCode=JFBX&FrameName=frameJFBX&Ids=" + Ids, "添加数据", "1000", "");
            },
            CheckAll: function (dom) {
                $(dom).parent().parent().parent().next().find("input[type=checkbox]").prop("checked", $(dom).prop("checked"));
            }
        })

        avalon.ready(function () {
            ComFunJS.initForm();
            model.GetJFBXItem();
            //获取请假类型
            $.getJSON('/API/FTAPI.ashx?Action=GETCOLUMNLIST', { P1: 4 }, function (resultData) {
                if (resultData.ErrorMsg == "") {
                    model.ColumnData = resultData.Result;
                }
            })
            $.getJSON('/API/FTAPI.ashx?Action=GETJFBXMENUCOUNT', function (resultData) {
                if (resultData.ErrorMsg == "") {
                    model.TotalCount = resultData.Result == "0" ? "" : resultData.Result;
                    model.UserCount = resultData.Result1 == "0" ? "" : resultData.Result1;
                }
            })
            model.GetJFBXList();
        }) 
        function ViewForm(ID, PIID) {
            parent.ComFunJS.winviewform("/View/APPBaseView/APP_ADD_WF.html?FormCode=JFBX&ID=" + ID + "&PIID=" + PIID, "添加数据", "1000", "");
        }
    </script>
</head>
<body ms-controller="APP_JFBX">
    <script type="avalon" id="tmpl">
        <ul>
            <li ms-repeat-branch="branch.SubBranch"><span class="spanli" ms-click="folderclick(branch,this)"> <i class="iconfont icon-bumenshezhi" style="color:#1B9AF7;"></i><span class="spanwz">{{branch.BranchName}}</span></span><div ms-include="'tmpl'" style="display:none"></div></li>
            <li ms-repeat-user="branch.SubUsers" ms-click="fnqueryuser(user)" class="sel">
                <span class="spanli">
                    <i class=" treefile iconfont icon-ren"></i>
                    <span class="spanwz">{{user.UserRealName}}</span>
                </span>
            </li>
        </ul>
    </script>
    <div class="container-fluid maindiv" style="margin-top: 20px" id="dvContent">
        <div style="width:140px;position:absolute">
            <ul class="list-group text-center  leftmenu ">
                <li class="list-group-item sel" ms-class-1="sel:menutype==''" ms-click="selmenu('')">
                    <div>
                        <i class="iconfont icon-shenpiliuchengtubiao2208 hvr-grow"></i>{{UserCount}}
                    </div>
                    <div>我的经费</div>
                </li>
                <li class="list-group-item" ms-class-1="sel:menutype=='-1'" ms-click="selmenu('-1')">
                    <div>
                        <i class="iconfont icon-shenpiliuchengtubiao2208 hvr-grow"></i>{{TotalCount}}
                    </div>
                    <div>部门经费</div>
                </li>

            </ul>
            <div class="panel panel-default" ms-if="menutype=='-1'" style="margin-left:2px">
                <div class=" panel-body" style="padding:5px 0 5px 0">
                    <ul style="padding-left: 10px;margin-top:10px;">
                        <li ms-repeat-branch="userlist.SubBranch">
                            <span class="spanli" ms-click="folderclick(branch,this)"><i class="iconfont icon-bumenshezhi" style="color:#1B9AF7;"></i><span class="spanwz">{{branch.BranchName}}</span></span>
                            <div ms-include="'tmpl'" class="divuser" style="display: none"></div>
                        </li>
                        <li ms-repeat-user="userlist.SubUsers" ms-click="fnqueryuser(user)">
                            <span class="spanli">
                                <i class=" treefile iconfont icon-ren"></i>
                                <span class="spanwz">{{user.UserRealName}}</span>
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        </div>
        <div class="row contentdv" style="margin-left:141px">
         
            <div class="col-xs-12 ">
                <div class="panel panel-default" ms-if="menutype==''">
                    <div class="panel-heading"><a href="#" ms-click="showaddxf()" style="font-size:16px">+待审消费记录</a></div>
                    <table class="table table-bordered table-hover table-hover table-striped">
                        <thead>
                            <tr><th><input type="checkbox" name="name" ms-click="CheckAll(this)" /></th><th>消费类别</th><th>金额</th><th>时间</th><th>事由</th><th>操作</th></tr>
                            <tr id="thadd" style="display:none">
                                <th></th>
                                <td>
                                    <select class="form-control input-sm" ms-duplex="JFBXItem.LeiBie">
                                        <option value="">请选择</option>
                                        <option ms-repeat-item="ColumnData" ms-attr-value="item.TypeNO">{{item.TypeNO}}</option>
                                    </select>
                                </td>
                                <td><input type="text" class="form-control input-sm" ms-duplex="JFBXItem.BXJE" placeholder="消费金额"></td>
                                <td><input type="text" class="form-control input-sm  szhl_form_date" placeholder="时间" ms-duplex="JFBXItem.BXDate"></td>
                                <td><input type="text" class="form-control input-sm" placeholder="事由" ms-duplex="JFBXItem.BXContent"></td>
                                <td style="text-align:center"><button class="btn btn-default btn-sm" ms-click="hideaddxf()"> 取消</button><button class="btn  btn-sm btn-success" style="margin-left:5px" ms-click="addxf()"><i class="fa fa-edit"></i>  确认</button></td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ms-repeat-item="model.JFBXItemList">
                                <td><input type="checkbox" name="itemid" ms-attr-val="item.ID" /></td>
                                <td>{{item.LeiBie}}</td>
                                <td>{{item.BXJE}}</td>
                                <td>{{item.BXDate|date("yyyy-MM-dd")}}</td>
                                <td>{{item.BXContent}}</td>
                                <td><button class="btn btn-danger  btn-xs" style="margin-left:10px" ms-click="delxf(item)"> <i class="fa fa-edit"></i>删除</button></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading"><span>我的报销单</span></div>
                    <div class="panel-body">
                        <div class="row">
                           
                            <div class="col-xs-9">
                                <div class="input-group">
                                    <div class="input-group-addon">查询条件</div>
                                    <input id="tbSearch" class="form-control" ms-duplex="searchContent" type="text" placeholder="输入报销内容查询" />
                                    <span class="input-group-btn">
                                        <button class="btn btn-info" ms-click="GetJFBXList()">查询</button>
                                    </span>
                                </div>
                            </div>
                            <div class="col-xs-3 text-right">
                                <a href="#" id="btADD" ms-click="addJFBX()" style=" height: 34px;line-height: 34px;" class="button  button-primary">添加报销</a>
                            </div>
                        </div>
                    </div>
                    <div id="dtgrid" style="margin-top:20px"></div>
                    <div id="dtgridTool" class="dt-grid-toolbar-container"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="/CSS/bootstrap3.3.5/js/bootstrap.js" type="text/javascript"></script>
    <link href="/JqueryPlug/umeditor122/themes/default/css/umeditor.css" type="text/css" rel="stylesheet" />
    <script src="/JqueryPlug/umeditor122/umeditor.js" type="text/javascript" charset="utf-8"></script>
    <script src="/JqueryPlug/umeditor122/umeditor.config.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
